<template>
  <div class="main">
    <el-card class="main-card">
      <template #header>
        <div class="main-card-header">
          <span>数据上传</span>
        </div>
      </template>
<!--      <div class="main-card-text">通量 (flux) 数据上传模块</div>-->
<!--      <div class="main-card-content">-->
<!--        <div class="main-card-content-file">-->
<!--          <el-upload-->
<!--            :auto-upload="false"-->
<!--            :on-change="handleFileChange"-->
<!--            accept=".xlsx,.xls"-->
<!--            :limit="1"-->
<!--          >-->
<!--            <el-button type="primary">选择文件</el-button>-->
<!--            <template #tip>-->
<!--              <div class="el-upload__tip">只能上传1个excel文件</div>-->
<!--            </template>-->
<!--          </el-upload>-->
<!--        </div>-->
<!--        <div class="main-card-content-button">-->
<!--          <el-button-->
<!--            type="success"-->
<!--            :disabled="!file || isUploading"-->
<!--            @click="uploadFluxExcel"-->
<!--          >-->
<!--            {{ isUploading ? "上传中..." : "上传通量数据" }}-->
<!--          </el-button>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="main-card-text">气象 (meteorology) 数据上传模块</div>-->
<!--      <div class="main-card-content">-->
<!--        <div class="main-card-content-file">-->
<!--          <el-upload-->
<!--            :auto-upload="false"-->
<!--            :on-change="handleFileChange"-->
<!--            accept=".xlsx,.xls"-->
<!--            :limit="1"-->
<!--          >-->
<!--            <el-button type="primary">选择文件</el-button>-->
<!--            <template #tip>-->
<!--              <div class="el-upload__tip">只能上传1个excel文件</div>-->
<!--            </template>-->
<!--          </el-upload>-->
<!--        </div>-->
<!--        <div class="main-card-content-button">-->
<!--          <el-button-->
<!--            type="success"-->
<!--            :disabled="!file || isUploading"-->
<!--            @click="uploadMeteorologyExcel"-->
<!--          >-->
<!--            {{ isUploading ? "上传中..." : "上传气象数据" }}-->
<!--          </el-button>-->
<!--        </div>-->
<!--      </div>-->
  <div class="main-card-text">通用数据上传模块</div>
      <div class="main-card-content">
        <div class="main-card-content-file">
          <el-upload
            :auto-upload="false"
            :on-change="handleFileChange"
            accept=".xlsx,.xls"
            :limit="1"
          >
            <el-button type="primary">选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传1个excel文件</div>
            </template>
          </el-upload>
        </div>
        <div class="main-card-content-button">
          <el-button
            type="success"
            :disabled="!file || isUploading"
            @click="uploadEcometeorologyExcel"
          >
            {{ isUploading ? "上传中..." : "上传通用数据" }}
          </el-button>
        </div>
      </div>
<!--      <div class="main-card-text">荧光 (sif) 数据上传模块</div>-->
<!--      <div class="main-card-content">-->
<!--        <div class="main-card-content-file">-->
<!--          <el-upload-->
<!--              :auto-upload="false"-->
<!--              :on-change="handleFileChange"-->
<!--              accept=".xlsx,.xls"-->
<!--              :limit="1"-->
<!--          >-->
<!--            <el-button type="primary">选择文件</el-button>-->
<!--            <template #tip>-->
<!--              <div class="el-upload__tip">只能上传1个excel文件</div>-->
<!--            </template>-->
<!--          </el-upload>-->
<!--        </div>-->
<!--        <div class="main-card-content-button">-->
<!--          <el-button-->
<!--              type="success"-->
<!--              :disabled="!file || isUploading"-->
<!--              @click="uploadSifExcel"-->
<!--          >-->
<!--            {{ isUploading ? "上传中..." : "上传荧光数据" }}-->
<!--          </el-button>-->
<!--        </div>-->
<!--      </div>-->
    </el-card>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage, ElUpload, ElButton } from "element-plus";
import { fluxDataUploadService } from "@/api/flux.js";
import { meteorologyDataUploadService } from "@/api/meteorology.js";
import {sifDataUploadService} from "@/api/sif.js";
import {ecometeorologyDataUploadService} from "@/api/ecometeorology.js";

const file = ref(null);
const isUploading = ref(false); // 用于控制上传按钮的禁用状态

// 选择文件后触发
function handleFileChange(uploadFile) {
  const selectedFile = uploadFile.raw;
  if (
    selectedFile &&
    (selectedFile.type === "application/vnd.ms-excel" ||
      selectedFile.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
  ) {
    file.value = selectedFile;
  } else {
    ElMessage.warning("请选择有效的Excel文件");
    file.value = null;
  }
}

// 通用的文件上传函数
async function uploadFile(service) {
  if (!file.value) {
    ElMessage.warning("请选择文件");
    return;
  }

  const formData = new FormData();
  formData.append("excelFile", file.value);

  isUploading.value = true; // 开始上传，禁用按钮
  try {
    await service(formData);
    ElMessage.success("上传成功");
  } catch (error) {
    console.error(error);
    ElMessage.error("上传失败");
  } finally {
    isUploading.value = false; // 上传结束，启用按钮
  }
}

// 上传flux文件
async function uploadFluxExcel() {
  await uploadFile(fluxDataUploadService);
}

// 上传气象meteorology文件
async function uploadMeteorologyExcel() {
  await uploadFile(meteorologyDataUploadService);
}

// 上传荧光sif文件
async function uploadSifExcel() {
  await uploadFile(sifDataUploadService);
}

// 上传气象ecometeorology文件
async function uploadEcometeorologyExcel() {
  await uploadFile(ecometeorologyDataUploadService);
}
</script>

<style lang="scss" scoped>
.main {
  background: url("@/assets/starfield.jpg") no-repeat center center / cover;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;

  .main-card {
    width: 70%;
    margin-top: 1%;
    .main-card-header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 6vh;
      background-color: rgb(200, 214, 229, 0.3);
      font-size: 2.5vh;
      font-weight: bold;
    }
    .main-card-text {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 5vh;
      background-color: rgb(200, 214, 229, 0.3);
      font-size: 2.5vh;
      font-weight: bold;
    }
    .main-card-content {
      padding-top: 1%;
      padding-bottom: 1%;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 30%;
      // 整体居中
      margin: 0 auto;
      justify-content: space-around;
      .main-card-content-file {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>